import ApiFetchers from "@/apis/api_fetchers"
import { useInfiniteFetchWithCursorAndPage } from "@/features/business"
import Amount from "@/pages/TransactionRecordPage/components/Amount"
import DateText from "@/pages/TransactionRecordPage/components/DateText"
import ItemTitle from "@/pages/TransactionRecordPage/components/ItemTitle"
import {
    ItemWrapper,
    Left as LeftWrapper,
    Right as RightWrapper,
} from "@/pages/TransactionRecordPage/components/Wrappers"
import styled from "@emotion/styled"
import { memo, useCallback } from "react"
import { useSearchParams } from "react-router-dom"
import BaseRecordList from "../components/BaseRecordList"
import { balanceStatus } from "../constants"
import { BaseFormType } from "../types"
import { deduplicationList, getFormData, getURLSearchParams } from "../utils/util"
import FootDataCount from "@/pages/TransactionRecordPage/components/FootDataCount"
import { Virtuoso } from "react-virtuoso"

const BalanceStyled = styled.div`
    font-size: 12rem;
    color: #69728c;
`

const Component: React.FC = () => {
    const [params, setParams] = useSearchParams()

    const { list, loading, fetchData, hasMore, error } = useInfiniteFetchWithCursorAndPage(
        ApiFetchers.getTransactionRecords,
        {
            ...getFormData({ ...getURLSearchParams(params) }),
        },
    )

    const handleChange = useCallback(
        (value?: BaseFormType) => {
            setParams(value ? { ...value } : {}, { replace: true })
        },
        [setParams],
    )

    const uniqueList = deduplicationList<TransactionApiTypes.Fetcher.Response.Record>(list) || []

    const loadMoreDebounced = () => {
        if (!hasMore) return
        if (loading) return
        fetchData()
    }

    return (
        <>
            <BaseRecordList<TransactionApiTypes.Fetcher.Response.Record>
                value={getURLSearchParams(params)}
                statusOptions={balanceStatus}
                onChange={handleChange}
                list={uniqueList}
                loading={loading}
                error={error}
                hasMore={hasMore}
            >
                <Virtuoso
                    style={{ flex: 1 }}
                    data={uniqueList}
                    endReached={loadMoreDebounced}
                    components={{
                        Footer: () => (
                            <FootDataCount
                                loading={loading}
                                hasMore={hasMore}
                                count={list.length}
                            />
                        ),
                    }}
                    itemContent={(_, item) => (
                        <ItemWrapper key={item.id}>
                            <LeftWrapper>
                                <ItemTitle text={item.name} />
                                <DateText timestamp={item.timestamp} />
                            </LeftWrapper>
                            <RightWrapper>
                                <Amount
                                    amount={item.amount}
                                    isColorFulled
                                />
                                <BalanceStyled>
                                    Balance: {"\u20B1"} {item.after_balance}
                                </BalanceStyled>
                            </RightWrapper>
                        </ItemWrapper>
                    )}
                />
            </BaseRecordList>
        </>
    )
}

export default memo(Component)
